<template>
	<view :style="[AppSkinVar]">
	<!-- 	<view class="header-popup" v-if="accountType !== 'Y'">
			<view class="e-flex-y-center" @tap="popupShow = true">
				<text class="e-m-r-10">{{ $t(classType.text) }}</text>
				<image :src="$staticPath('user/down_arrow.png')" class="img-28"></image>
			</view>
		</view> -->
		<view class="tab e-flex-xy-center bg-white">
			<view class="text-center e-rela e-flex-1 fw-600" @tap="tabIndex = 0" :class="{ 'tab-active': tabIndex === 0 }">
				{{ $t('common.全部') }}
			</view>
			<view class="text-center e-rela e-flex-1 fw-600" @tap="tabIndex = 1" :class="{ 'tab-active': tabIndex === 1 }">
				{{ $t('user.收入') }}
			</view>
			<view class="text-center e-rela e-flex-1 fw-600" @tap="tabIndex = 2" :class="{ 'tab-active': tabIndex === 2 }">
				{{ $t('user.支出') }}
			</view>
		</view>
		<view class="date-picker e-flex-column e-flex-items-start" v-if="accountType === 'Y'">
			<view class="e-flex e-flex-1 e-p-l-50">
				<text @tap="startDatePickerShow = true">{{ startDateText }}</text>
				<image :src="$staticPath('user/arrow.png')" class="date-arrow e-m-l-10 e-m-r-10"></image>
				<text @tap="endDatePickerShow = true">{{ endDateText }}</text>
				<image :src="$staticPath('user/date.png')" class="img-32 e-m-l-10"></image>
			</view>
		</view>
		<swiper class="swiper" :current="tabIndex" @change="(e) => (tabIndex = e.detail.current)">
			<swiper-item>
				<scroll-view scroll-y @scrolltolower="getAllList()" lower-threshold="60">
					<recordCard v-for="item in allList" :infoSymbol="item.isout == 1" :status="item.isout == 0" :key="item.id" :info="item"></recordCard>
					<empty :text="$t('user.暂无记录')" :icon="$staticPath('default_img.png')" v-if="allEmptyShow"></empty>
					<load-more v-else :showLoad="allShowLoad"></load-more>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y @scrolltolower="getIncomeList()" lower-threshold="60">
					<recordCard v-for="item in incomeList" :key="item.id" :info="item" :infoSymbol="true" :status="false"></recordCard>
					<empty :text="$t('user.暂无记录')" :icon="$staticPath('default_img.png')" v-if="incomeEmptyShow"></empty>
					<load-more v-else :showLoad="incomeShowLoad"></load-more>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y @scrolltolower="getExpendList()" lower-threshold="60">
					<recordCard v-for="item in expendList" :infoSymbol="false" :status="true" :key="item.id" :info="item"></recordCard>
					<empty :text="$t('user.暂无记录')" :icon="$staticPath('default_img.png')" v-if="expendEmptyShow"></empty>
					<load-more v-else :showLoad="expendShowLoad"></load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
		<e-datetime-picker
			:show="startDatePickerShow"
			:value="startDate[tabIndex]"
			mode="date"
			@cancel="startDatePickerShow = false"
			@confirm="confirm($event, 1)"
		></e-datetime-picker>
		<e-datetime-picker :show="endDatePickerShow" :value="endDate[tabIndex]" mode="date" @cancel="endDatePickerShow = false" @confirm="confirm($event, 2)"></e-datetime-picker>
		<e-popup :show="popupShow" @close="popupShow = false" round="20">
			<view class="class-popup e-p-t-22 bg-white e-rela">
				<image class="close-btn img-40" :src="$staticPath('classify/close.png')" @tap="popupShow = false"></image>
				<view class="e-font-32 fw-600 text-center e-m-b-24">
					{{ $t('user.选择明细分类') }}
				</view>
				<scroll-view class="class-popup__body" scroll-y>
					<view class="e-flex e-flex-wrap e-p-t-40 e-p-l-30 e-p-r-30">
						<view
							class="class-item"
							:style="[classType.id === -1 ? backgroundColor : '']"
							:class="{ 'class-active': classType.id === -1 }"
							@tap="handleScreen('common.全部', -1)"
						>
							{{ $t('common.全部') }}
						</view>
						<view
							class="class-item"
							:style="[classType.id === item.dictValue ? backgroundColor : '']"
							:class="{ 'class-active': classType.id === item.dictValue }"
							@tap="handleScreen(item.dictLabel, item.dictValue)"
							v-for="item in typeList"
							:key="item.dictValue"
						>
							{{ item.dictLabel }}
						</view>
					</view>
				</scroll-view>
			</view>
		</e-popup>
	</view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { getFundDetailsList, getFrozenDetailsList, getDicts, type DictsItem } from '@/common/request/api';
import recordCard from './child/record-card.vue';
import { useCurrentInstance, useQueryPage } from '@/common/hooks';
import { timeFormat } from '@/common/utils';
import { onLoad } from '@dcloudio/uni-app';

const props = defineProps({
	id: String,
	type: String,
	isFrozen: String
});

const ctx = useCurrentInstance();

const accountType = ref(props.type);
const tabIndex = ref(0);
const typeList = ref<DictsItem[]>([]);

const startDate = ref<number[]>([]);
const endDate = ref<number[]>([]);
const startDatePickerShow = ref(false);
const endDatePickerShow = ref(false);

const popupShow = ref(false);
const classType = ref({
	text: 'common.全部',
	id: -1
});

const startDateText = computed(() => {
	return timeFormat(startDate.value[tabIndex.value], 'yyyy-mm-dd');
});
const endDateText = computed(() => {
	return timeFormat(endDate.value[tabIndex.value], 'yyyy-mm-dd');
});

const allParams = computed(() => {
	let params: Record<string, any> = {
		strategy: props.id
	};
	if (accountType.value === 'Y') {
		params.beginTime = startDate.value[0] ? timeFormat(startDate.value[0], 'yyyy-mm-dd') : '';
		params.endTime = endDate.value[0] ? timeFormat(endDate.value[0], 'yyyy-mm-dd') : '';
	}
	if (classType.value.id !== -1) {
		params.typeid = classType.value.id;
	}

	return params;
});

const {
	showLoad: allShowLoad,
	isEmpty: allEmptyShow,
	list: allList,
	handleQueryPage: getAllList,
	handleRefresh: refreshAllList
} = useQueryPage({
	api: props.isFrozen === '0' ? getFundDetailsList : getFrozenDetailsList,
	option: {
		params: allParams
	}
});

const incomeParams = computed(() => {
	let params: Record<string, any> = {
		strategy: props.id,
		isout:1
	};
	if (accountType.value === 'Y') {
		params.beginTime = startDate.value[1] ? timeFormat(startDate.value[1], 'yyyy-mm-dd') : '';
		params.endTime = endDate.value[1] ? timeFormat(endDate.value[1], 'yyyy-mm-dd') : '';
	}
	if (classType.value.id !== -1) {
		params.typeid = classType.value.id;
	}

	return params;
});

const {
	showLoad: incomeShowLoad,
	isEmpty: incomeEmptyShow,
	list: incomeList,
	handleQueryPage: getIncomeList,
	handleRefresh: refreshIncomeList
} = useQueryPage({
	api: props.isFrozen === '0' ? getFundDetailsList : getFrozenDetailsList,
	option: {
		params: incomeParams
	}
});

const expendParams = computed(() => {
	let params: Record<string, any> = {
		strategy: props.id,
		isout:0
	};
	if (accountType.value === 'Y') {
		params.beginTime = startDate.value[2] ? timeFormat(startDate.value[2], 'yyyy-mm-dd') : '';
		params.endTime = endDate.value[2] ? timeFormat(endDate.value[2], 'yyyy-mm-dd') : '';
	}
	if (classType.value.id !== -1) {
		params.typeid = classType.value.id;
	}

	return params;
});

const {
	showLoad: expendShowLoad,
	isEmpty: expendEmptyShow,
	list: expendList,
	handleQueryPage: getExpendList,
	handleRefresh: refreshExpendList
} = useQueryPage({
	api: props.isFrozen === '0' ? getFundDetailsList : getFrozenDetailsList,
	option: {
		params: expendParams
	}
});

const reset = () => {
	switch (tabIndex.value) {
		case 0:
			refreshAllList();
			break;
		case 1:
			refreshIncomeList();
			break;
		case 2:
			refreshExpendList();
			break;
	}
};

const backgroundColor = computed(() => {
	return {
		backgroundColor: ctx.AppSkin.primary.replace('1)', '.1)')
	};
});

const handleScreen = (text: string, id: number) => {
	classType.value = { text, id };
	popupShow.value = false;
	reset();
};
const confirm = ({ value }: { value: number }, type: number) => {
	if (type == 1) {
		startDate.value.splice(tabIndex.value, 1, value);
		startDatePickerShow.value = false;
	} else {
		endDate.value.splice(tabIndex.value, 1, value);
		endDatePickerShow.value = false;
	}
	reset();
};

onLoad(() => {
	getDicts('h_transaction_type').then((res) => {
		typeList.value = res.data;
	});
	if (props?.type === 'Y') {
		let date = new Date();
		let [year, month] = [date.getFullYear(), date.getMonth() + 1];
		let _startDate = new Date(`${year}/${month}/01`).getTime();
		startDate.value = [_startDate, _startDate, _startDate];
		let _endDate: number;
		if (month === 12) {
			_endDate = new Date(`${year + 1}/01/01`).getTime();
		} else {
			_endDate = new Date(`${year}/${month + 1}/01`).getTime();
		}
		endDate.value = [_endDate, _endDate, _endDate];
	}

	if (props.isFrozen === '1') {
		uni.setNavigationBarTitle({
			title: ctx.$t('user.冻结明细')
		});
	}
	getAllList();
	getIncomeList();
	getExpendList();
});
</script>

<style lang="scss" scoped>
.header-popup {
	padding: 0 50rpx;

	> view {
		height: 100rpx;
	}
}

.tab {
	> view {
		flex: 0 0 33.33%;
		height: 100rpx;
		line-height: 100rpx;
	}

	.tab-active {
		&::before {
			content: '';
			position: absolute;
			width: 60rpx;
			height: 6rpx;
			background: var(--color-primary);
			border-radius: 3rpx;
			bottom: 0;
			left: calc(50% - 23rpx);
		}
	}
}

.date-picker {
	height: 100rpx;
	color: #666666;

	.date-arrow {
		width: 22rpx;
		height: 18rpx;
	}
}

.swiper {
	height: calc(100vh - 200rpx);

	scroll-view {
		height: 100%;
	}
}

.class-popup {
	&__body {
		height: 70vh;
	}

	.close-btn {
		position: absolute;
		top: 40rpx;
		right: 32rpx;
	}

	.class-item {
		flex: 0 0 calc((100% - 44rpx) / 3);
		width: calc((100% - 44rpx) / 3);
		height: 144rpx;
		font-size: 28rpx;
		line-height: 144rpx;
		text-align: center;
		margin: 0 22rpx 40rpx 0;
		border-radius: 6rpx;
		border: 2rpx solid #e6e6e6;

		&:nth-child(3n) {
			margin-right: 0;
		}
	}

	.class-active {
		border: 2px solid var(--color-primary);
	}
}
</style>
